import React, {useEffect, useRef, useImperativeHandle} from "react";

/**
 * useLayoutEffect：
 *     1. 其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。
 *     2. 可以使用它来读取 DOM 布局并同步触发重渲染。
 *     3. 在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。
 *
 * 提示：
 *     1. 推荐一开始先用 useEffect，只有当它出问题的时候再尝试使用 useLayoutEffect。
 *     2. 无论 useLayoutEffect 还是 useEffect 都无法在 Javascript 代码加载完成之前执行。
 *     3. 若要从服务端渲染的 HTML 中排除依赖布局 effect 的组件，
 *     可以通过使用 showChild && <Child /> 进行条件渲染，并使用 useEffect(() => { setShowChild(true); }, [])
 *     延迟展示组件。这样，在客户端渲染完成之前，UI 就不会像之前那样显示错乱了。
 */
function HookTest9(props, ref) {
    const inputRef = useRef();
    useImperativeHandle(ref, () => ({
        focus: () => {
            inputRef.current.focus();
        }
    }));
    return <input ref={inputRef} />;
}
HookTest9 = React.forwardRef(HookTest9);
